<template>
  <div class="hry-card-wrapper">
    <div class="hry-card-pic">
      <img
        style="width: 100%"
        :src="formatImg(cardInfo.picture)"
        :alt="cardInfo.project_name"
        :onerror="errorImg"
      />
      <div class="hry-timer" v-if="cardInfo.status === 2">
        {{ formatTimer() }}
      </div>
    </div>
    <div class="hry-icon">
      <span :class="formatStatusClass(cardInfo.status)">{{
        formatStatus(cardInfo.status)
      }}</span>
    </div>
    <div class="hry-card-content">
      <span class="title">{{ cardInfo.project_name }}</span
      ><br />
      <span class="company">出品方：{{ cardInfo.company_name }}</span>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import { projectStatus, projectStatusClass } from "../../tool/status";
export default {
  name: "index",
  props: {
    cardInfo: {
      type: Object
    }
  },
  data() {
    return {
      timer: null,
      endTime: null,
      nowDate: "",
      errorImg: 'this.src="' + require("@/assets/img/tulie.png") + '"'
    };
  },
  methods: {
    moment,
    formatImg(thumb) {
      if (thumb.indexOf("http") !== -1) {
        return thumb;
      } else {
        return this.$api.imgProjectUrl + thumb;
      }
    },
    formatTimer() {
      if (this.endTime) {
        this.nowDate = this.moment().unix();
        if (this.nowDate < this.endTime) {
          let mixinTime = this.endTime - this.nowDate;
          var dd = Math.floor(mixinTime / 60 / 60 / 24);
          var hh = Math.floor((mixinTime / 60 / 60) % 24);
          var mm = Math.floor((mixinTime / 60) % 60);
          var ss = Math.floor(mixinTime % 60);
          return "剩余时间：" + dd + "天" + hh + "小时" + mm + "分" + ss + "秒";
        } else {
          return "";
        }
      } else {
        return "";
      }
    },
    formatStatus(status) {
      return projectStatus(status);
    },
    formatStatusClass(status) {
      return projectStatusClass(status);
    }
  },
  watch: {
    cardInfo: {
      handler(val) {
        if (val) {
          if (val.status === 2) {
            this.endTime = JSON.parse(JSON.stringify(val.end_time));
            if (this.timer) {
              clearInterval(this.timer);
            }
            this.timer = setInterval(() => {
              this.formatTimer();
            }, 1000);
          }
        }
      },
      deep: true,
      immediate: true
    }
  },
  beforeDestroy() {
    clearInterval(this.timer);
    this.timer = null;
  }
};
</script>

<style scoped lang="less">
.hry-card-wrapper {
  width: calc(100% - 40px);
  position: relative;
  display: inline-block;
  box-shadow: 0 0 10px rgba(216, 216, 216, 0.8);
  margin: 20px 20px;
  font-size: 0;
  border-radius: 5px;
  overflow: hidden;
  .hry-card-pic {
    overflow: hidden;
    position: relative;
    width: 100%;
    img {
      width: 100%;
    }
    .hry-timer {
      position: absolute;
      padding: 12px 19px;
      color: @white;
      font-size: 20px;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.5);
    }
  }
  .hry-icon {
    position: absolute;
    top: 0;
    right: 25px;
    span {
      color: #fff;
      font-size: 20px;
      display: inline-block;
      padding: 11px 12px;
    }
    .hry-ready {
      background: #fb3;
      border-bottom: none;
    }
    .hry-current {
      background: @primary-color;
      border-bottom: none;
    }
    .hry-success {
      background: @error-color;
      border-bottom: none;
    }
  }
  .hry-card-content {
    padding: 39px 14px 18px 14px;
    text-align: center;
    cursor: pointer;
    .title {
      display: inline-block;
      font-size: 30px;
      line-height: 1.2;
      font-weight: bold;
      color: #444444;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .company {
      display: inline-block;
      margin-top: 18px;
      font-size: 20px;
      color: #999;
      line-height: 1.8;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
</style>
